<template>
	<div>
		<Modal v-model="modal"
		       class="modal-full modal-case-detail"
		       :title="modalTitle"
		       width="90%">
			<div slot="header">
				<div class="header-inner">{{modalTitle}}</div>
				<div class="button-panel-button clear-after">
					<i-button :disabled="!hasNext"
					          :loading="dataLoading"
					          class="btn-next"
					          type="primary"
					          @click="addNext">下一案件</i-button>
					<ActionMirror class="mirror-box"
					              @triggerAction="triggerAction"
					              :actionStorage="listData[activeIndex] && listData[activeIndex].actions"
					              :actions="mirrorActionList"></ActionMirror>
				</div>
			</div>
			<div v-if="modalShow">
				<div class="case-detail-box"
				     v-if="modelLoad">
					<Spin size="large"
					      fix
					      v-show="dataLoading && fristLoad"></Spin>
					<div ref="list_button"
					     v-show="!dataLoading || !fristLoad"
					     class="list-botton"
					     :class="{'list-button-active':listShow}"
					     @click="listButtonClick">
						<Icon type="navicon-round"></Icon>
					</div>
					<div ref="list_box"
					     v-show="!dataLoading || !fristLoad"
					     class="list-box"
					     :class="{'list-box-hidden':!listShow}">
						<GridTable v-if="listLoad"
						           :hasCheck="false"
						           ref="list_table"
						           :model="ownerModel"
						           :fixedSearchPanel="false"
						           @actionTriggerInner="listActionTrigger"></GridTable>
					</div>
					<div class="tabs-wrapper">
						<div v-for="(item,index) in listData"
						     class="tab-item"
						     :class="{'storage':hasStorage(index),active:activeIndex===index}"
						     @click="tabClick(index)"
						     :key="index">
							<div v-if="item.data">
								<div>{{item.data.citizen_name || item.data.debtor_name}}</div>
								<div>{{item.data.citizen_mobile|| item.data.mobile}}</div>
							</div>
							<div v-else
							     class="text-loading">
								<i class="ivu-load-loop ivu-icon ivu-icon-load-c"></i> 加载中...
							</div>
							<span v-show="listData.length>1"
							      @click="deleteTab(index)">
								<Icon class="icon-delete"
								      type="ios-close-empty"></Icon>
							</span>
						</div>
						<div v-if="false"
						     class="tab-item tab-item-add"
						     @click="addNext">
							<Icon type="ios-pricetag"></Icon> 下个案件
						</div>
						<div v-if="false"
						     class="tab-item tab-item-add"
						     @click="addNext">
							<Icon type="ios-pricetag"></Icon> 下个案件
						</div>
					</div>
					<Row>
						<Col :class="{'content-wrapper':hasTabs}">
						<Spin class="spin-inner"
						      size="large"
						      fix
						      v-show="dataLoading && !fristLoad"></Spin>
						<Row>
							<Col class="main-box"
							     :span="12">
							<Tabs class="ivu-col ivu-col-span-24"
							      v-model="infoTab">
								<TabPane label="案件信息"
								         name="case">
									<View-control :index="$parent.actionDataIndex"
									              @build="formBuild('main')"
									              :view="false"
									              :module="actionModel.code+'_main_form'"
									              ref="main"
									              :col="$parent.modelParam('col')||1"
									              v-model="data"
									              :model="formModel"
									              @fieldTrigger="fieldTrigger"></View-control>
								</TabPane>
							</Tabs>
							</Col>
							<Col class="contact-box"
							     :span="12">
							<Form-control @build="formBuild('contact')"
							              :view="false"
							              :module="actionModel.code+'_contact_form'"
							              ref="contact"
							              :col="$parent.modelParam('col')||1"
							              v-model="data"
							              :model="contactModel"
							              @slavefieldTrigger="listFieldTrigger"></Form-control>
							</Col>
						</Row>
						<Form-control class="slaves-box"
						              @build="formBuild('slave')"
						              :view="false"
						              :module="actionModel.code+'_slave_form'"
						              ref="slave"
						              :col="$parent.modelParam('col')||1"
						              v-model="data"
						              :listLeftTab="false"
						              :model="slaveModel"></Form-control>
						</Col>
					</Row>

				</div>
			</div>
			<div slot="footer"
			     class="button-panel-button">
				<i-button @click="close">取消</i-button>
			</div>
		</Modal>
	</div>
</template>
<script>
import base from '../edit/modal';
import $ from '@/common';
import ViewControl from '@/components/view.vue';
import ActionMirror from 'action/actionMirror';
import GridTable from '@/node/gridPanel/index';

export default {
	extends: base,
	data() {
		return {
			contactCode: 'kcs_cs_contacts',
			workCode: 'kcs_cs_work',
			mainModel: {},
			listData: [],
			dataLoading: false,
			listLoad: false,
			listShow: false,
			fristLoad: true,
			activeIndex: 0,
			infoTab: 0,
			rightTab: 0,
			slaveModel: {},
			contactModel: {},
			dataRecord: {},
		};
	},
	watch: {
		activeIndex(v) {
			this.$parent.actionData = this.listData[v].data;
			this.$nextTick(() => {
				this.setFormData(this.listData[v].data);
			});
		},
	},
	computed: {
		hasTabs() {
			return true;
		},
		ownerModel() {
			var model = $.copy(this.$owner.model);
			for (let i in model.actions) {
				let action = model.actions[i];
				action.locate = 'hidden';
				if (action.param && action.param.trigger === 'dbclick') {
					action.param.trigger = null;
				}
			}
			model.actions.push(
				{
					code: 'addon',
					icon: 'checkmark',
					locate: 'inline',
					param: {
						trigger: 'dbclick',
					},
					_button_type: 'success',
				},
				{
					code: 'search',
					param: {
						fixed_panel: false,
					},
				}
			);
			return model;
		},
		activeData: {
			get() {
				return this.listData[this.activeIndex].data;
			},
			set(v) {
				this.$set(this.listData[this.activeIndex], 'data', v);
			},
		},
		mirrorActionList() {
			var data = [];
			var list = this.$parent.$parent.actionList;
			list.forEach(action => {
				if (action.param && action.param.in_detail) {
					data.push(action);
				}
			});
			return data;
		},
		hasNext() {
			return (
				this.$owner.pageOn < this.$owner.pageCount ||
				(this.actionDataIndex < this.$owner.listData.length - 1 && this.$owner.pageOn === this.$owner.pageCount)
			);
		},
		actionLog() {
			for (let action of this.mirrorActionList) {
				if (action.code === 'collect_log_add') {
					return action;
				}
			}
		},
	},
	created() {
		var slaves = [];
		var upSlaves = [];
		this.formModel.slaves.forEach(slave => {
			if (slave.code === this.contactCode || slave.code === this.workCode) {
				upSlaves.push(slave);
			} else {
				slaves.push(slave);
			}
		});
		this.slaveModel = {
			...this.formModel,
			slaves: [...slaves],
			events: this.formModel.events,
			fields: [],
		};
		this.contactModel = {
			...this.formModel,
			slaves: upSlaves,
			events: this.formModel.events,
			fields: [],
		};
		//提交action提交将会触发当前页面更新
		this.$parent.$parent.$on('actionSuccess', code => {
			this && this.updateData && this.updateData();
		});
		//清除缓存数据
		this.$parent.$parent.$on('storageClear', e => {
			if (e.storage) {
				if (
					this.listData[e.storage._index] &&
					this.listData[e.storage._index].actions &&
					this.listData[e.storage._index].actions[e.code]
				) {
					this.$set(this.listData[e.storage._index].actions, e.code, null);
				}
			}
		});
		//action中点击缓存触发
		this.$owner.$on('action_storage', this.actionStorageTrigger);
	},
	methods: {
		//字段特殊事件触发，用于处理点击拨打电话后直接打开催记弹窗的情况
		listFieldTrigger(e) {
			console.info('this.actionLog', this.actionLog);
			if (this.actionLog && e.code === 'mobile') {
				this.triggerAction(this.actionLog, this.contactDataTransfer(e.data));
			}
		},
		fieldTrigger(e) {
			console.info('this.actionLog', this.actionLog);
			if (this.actionLog && e.data && e.code === 'mobile') {
				if (this.activeData.kcs_cs_contacts && this.activeData.kcs_cs_contacts.length) {
					for (let i = 0; i < this.activeData.kcs_cs_contacts.length; i++) {
						var contactData = this.activeData.kcs_cs_contacts[i];
						if (e.data.mobile === contactData.mobile) {
							this.triggerAction(this.actionLog, this.contactDataTransfer(contactData));
						}
					}
				}
			}
		},
		//将联系人数据转化为催记数据，用于根据拨打的联系人自动填写催收日志信息
		contactDataTransfer(contactData) {
			return {
				contacts_id: contactData.id,
				contacts_id_name: contactData.name,
				contacts_name: contactData.name,
				contacts_mobile: contactData.mobile,
				contacts_relationship: contactData.relationship,
			};
		},
		//action缓存触发
		actionStorageTrigger({ action, data }) {
			if (!this.listData[this.activeIndex].actions) {
				this.$set(this.listData[this.activeIndex], 'actions', {});
			}
			this.$set(this.listData[this.activeIndex].actions, action.code, data);
		},
		hasStorage(index) {
			var data = this.listData[index] && this.listData[index].actions;
			for (let i in data) {
				if (data[i]) {
					return true;
				}
			}
			return false;
		},
		listButtonClick() {
			if (!this.listLoad) {
				this.listLoad = true;
			}
			if (!this.listShow) {
				this.$nextTick(() => {
					var closeList = e => {
						if (!this.$refs.list_box || !this.$refs.list_button) return;
						if (!this.$refs.list_box.contains(e.target) && !this.$refs.list_button.contains(e.target)) {
							this.listShow = false;
							document.removeEventListener('click', closeList);
						}
					};
					document.addEventListener('click', closeList);
				});
			}
			this.listShow = !this.listShow;
			if (this.listShow) {
				this.$nextTick(() => {
					this.$refs.list_table && this.$refs.list_table.updateTableStyle();
				});
			}
		},
		listActionTrigger(data) {
			if (data.code === 'addon') {
				for (let i in this.listData) {
					var row = this.listData[i];
					if (row.data.id === data.row.id) {
						this.activeIndex = parseInt(i);
						return;
					}
				}
				this.listData.push({
					data: data.row,
					actions: {},
				});
				this.activeIndex = this.listData.length - 1;
				this.$parent.$set(this.$parent, 'actionData', data.row);
				this.updateData();
			}
		},
		tabClick(i) {
			this.activeIndex = i;
		},
		next() {
			this.activeData = null;
			if (this.actionDataIndex < this.$owner.listData.length - 1) {
				this.$parent.actionDataIndex++;
				this.updateNextData(this.$owner.listData[this.actionDataIndex]);
			} else {
				this.dataLoading = true;
				this.$owner
					.fetch(this.$owner.pageOn + 1)
					.then(() => {
						this.$parent.actionDataIndex = 0;
						this.updateNextData(this.$owner.listData[0]);
					})
					.catch(() => {
						this.dataLoading = false;
					});
			}
		},
		updateNextData(data) {
			//数据排排重处理
			if (!this.dataRecord[data.id]) {
				this.dataRecord[data.id] = true;
				this.$set(this.$parent, 'actionData', data);
				this.updateData();
			} else {
				this.next();
			}
		},
		addNext() {
			this.listData.push({});
			this.activeIndex = this.listData.length - 1;
			this.$nextTick(() => {
				this.next();
			});
		},
		deleteTab(index) {
			this.listData.splice(index, index + 1);
			this.activeIndex = 0;
		},
		triggerAction(action, data) {
			if (!this.actionData && this.activeData) {
				this.$set(this.$parent, 'actionData', this.activeData);
			}
			var storage =
				this.listData[this.activeIndex].actions && this.listData[this.activeIndex].actions[action.code];
			if (storage) {
				storage = {
					...storage,
					_index: this.activeIndex,
				};
			}
			this.$owner.actionTrigger({
				code: action.code,
				row: this.activeData,
				index: this.actionDataIndex,
				data: this.activeData.id,
				option: {
					enable_storage: true,
					storage: storage,
					importData: data,
				},
			});
		},
		setFormData(data) {
			if (!this.listData.length) {
				this.listData.push({
					data,
					actions: {},
				});
				this.activeIndex = 0;
			} else {
				this.activeData = data;
			}
			this.fristLoad = false;
			if (this.activeData && !this.dataRecord[this.activeData.id]) {
				this.dataRecord[this.activeData.id] = true;
			}
			this.$refs.main.setData(this.activeData);
			this.$refs.contact.setData(this.activeData);
			this.$refs.slave.setData(this.activeData);
		},
		formBuild(code) {
			this.$refs[code] && (this.$refs[code].$parentAction = this);
		},
		load() {
			this.dataRecord = {};
			this.$set(this, 'listData', []);
			this.updateData();
			this.fristLoad = true;
		},
	},
	components: {
		ViewControl,
		ActionMirror,
		GridTable,
	},
};
</script>
<style lang="less">
.modal-case-detail {
	/*降低优先级是的内部的action mirror可以正常显示*/
	> .ivu-modal-mask,
	> .ivu-modal-wrap {
		z-index: 999;
	}
	.content-wrapper {
		margin: -8px 0;
		margin-left: 155px;
		border-left: 1px solid #b6b8be;
		height: 100%;
		padding: 8px 0;
	}
	.ivu-modal-header {
		height: 50px;
		.ivu-btn {
			margin-right: 8px;
		}
		.button-panel-button {
			position: absolute;
			left: 140px;
			top: 9px;
		}
	}
	.header-inner {
		/*9float: left;*/
		height: 20px;
		line-height: 20px;
		margin-right: 30px;
		font-size: 14px;
		color: #1c2438;
		font-weight: 700;
	}
	padding-top: 8px;
	.tabs-wrapper {
		overflow: auto;
		bottom: 60px;
		position: absolute;
		top: 49px;
		left: -4px;
		z-index: 10;
		width: 166px;
		padding-top: 8px;
		background: #f8f8f9;
		margin-left: 8px;
	}
	.tab-item {
		cursor: pointer;
		transition: margin, background 0.2s;
		padding: 4px 12px;
		border: 1px solid #dddee1;
		border-right: none;
		border-radius: 4px 0 0 4px;
		background: #f8f8f9;
		margin-left: 8px;
		position: relative;
		min-height: 30px;
		&.storage {
			border-color: #168bf3;
		}
		&.active {
			margin-left: 0;
			background: #fff;
		}
		&.tab-item-add {
			color: #168cf3;
			margin-top: 6px;
		}
		.text-loading {
			color: #168cf3;
		}
		.icon-delete {
			position: absolute;
			right: 6px;
			top: 0px;
			font-size: 24px;
		}
	}
	.button-panel-button > .ivu-btn {
		&.btn-next {
			float: left;
			margin-right: 16px;
		}
	}
	.ivu-modal-header,
	.ivu-modal-footer {
		z-index: 9;
		position: relative;
	}
}
.ivu-spin-fix.spin-inner {
	position: fixed;
	left: 5%;
	right: 5%;
	width: 90%;
	padding-left: 156px;
	background: transparent;
	padding-top: 80px;
	padding-right: 16px;
	padding-bottom: 90px;
	.ivu-spin-main {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.8);
	}
}
.case-detail-box {
	margin: -10px 0;
	clear: both;
	.list-box {
		width: 60%;
		position: fixed;
		background: #fff;
		padding: 16px;
		z-index: 10;
		height: 60%;
		right: 5%;
		border-radius: 4px 0 0 4px;
		margin-right: 18px;
		border: 1px solid #dddee1;
		box-shadow: 0 0 2px rgba(149, 149, 149, 0.47);
		overflow: hidden;
		transition: all 0.3s;
		box-sizing: border-box;
		padding: 0;
		top: 80px;
		.search-control .search-form {
			width: 100%;
		}
		> .grid-panel {
			padding: 16px;
		}
		.table-data-wrapper,
		.table-action-wrapper {
			height: 100%;
			table td button.ivu-btn {
				padding: 6px 6px 6px 10px;
				line-height: 1;
			}
		}
		&.list-box-hidden {
			width: 0;
			box-shadow: none;
			border: none;
		}
	}
	.list-botton {
		position: fixed;
		top: 0;
		right: 5%;
		font-size: 24px;
		margin-right: 30px;
		top: 80px;
		padding: 0px 16px;
		background: #168cf3;
		z-index: 11;
		border-radius: 0 0 4px 4px;
		color: #fff;
		cursor: pointer;
		transition: all 0.3s;
		&:hover {
			color: #fff;
			background-color: #57a3f3;
			border-color: #57a3f3;
		}
		&.list-button-active {
			right: 60%;
		}
	}

	.main-box {
		margin: 0;
		padding: 0px 16px;
	}
	.contact-box {
		margin: 0;
		.local-grid {
			/*margin-top: 16px;*/
			margin-bottom: 42px;
			overflow-y: auto;
			border: 1px solid #dddee1;
			max-height: 220px;
			.table tbody tr td {
				padding: 4px;
			}
			.table-fiexd-action {
				margin-top: -1px;
				margin-left: -1px;
			}
			button.action-button {
				padding: 3px 12px;
			}
			.action-box {
				position: absolute;
				bottom: 0;
			}
			.phone-field {
				.phone-call {
					display: inline-block;
					position: static;
					visibility: hidden;
				}
				&:hover .phone-call {
					display: inline-block;
					visibility: visible;
				}
			}
		}
		> .ivu-row > .ivu-col {
			margin: 0;
		}
	}
	.ivu-tabs-bar {
		margin-bottom: 16px;
	}
	.slaves-box {
		margin-top: 16px;
		margin-left: 16px;
		> .ivu-col {
			margin: 0;
		}
		/*
		.ivu-tabs-bar {
			margin-bottom: 0px;
		}
		*/
	}
	.field-group-tabs .ivu-tabs {
		padding-top: 0;
	}
	.ivu-tabs .ivu-tabs-tabpane {
		overflow-x: auto;
	}
}
</style>

